<template>
	<!-- swiper中的transfrom会使fixed失效,此时需设置fixed为false,而top会自动使用padding-top -->
	<mescroll-uni :fixed="false" top="92" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit">
		<!-- 数据列表 -->
		<navigator v-for="(item, index) in newsList" :key="item.id" class="cu-card article no-card solid-bottom"
		:url="'/pages/news/news?newsId='+item.id">
			<view class="cu-item padding-top-lg"> 
				<view class="content" style="padding:0;margin:0 30upx;">
					<image :src="item.image==null||item.image==''?'/static/image/errorImg.svg':item.image"
					 mode="aspectFill" :lazy-load="true" style="min-width:240upx;height:180upx;" :id="index" @error="imgError"></image>
					   
					<view class="desc">
						<view class="text-lg two-omit">{{item.title}}</view>
						<view class="text-sm two-omit" style="padding:4upx 0;" v-html="item.content"></view>
						<view class="flex justify-between align-center text-sm" style="color:#999;">
							<view>{{item.created_at}}</view>
							<view>阅读 {{item.watch_count}}</view>
						</view> 
					</view>
				</view>
			</view>  
		</navigator>
	</mescroll-uni> 
</template>
 
<script> 
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	 
	export default {
		components: { 
			MescrollUni,
		}, 
		data() {
			return {
				mescroll: null, //mescroll实例对象
				downOption:{
					auto:false, // 不自动加载
				},
				upOption:{
					auto:false, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 空空如也 ~', // 提示
						icon: '/static/image/queshengtu.svg'
					}
				},
				newsList: [],	//新闻列表
				isInit: false, // 列表是否已经初始化
			}
		},
		props:{
			i: Number, // 每个tab页的专属下标
			index: { // 当前tab的下标
				type: Number,
				default(){
					return 0
				}
			} 
		}, 
		watch:{
			// 监听下标的变化
			index(val){
				if (this.i === val && !this.isInit) {
					this.isInit = true; // 标记为true
					this.mescroll.triggerDownScroll();
				}
			}
		},
		mounted() {
			// 第一个tab,自动加载数据
			if(this.i === 0){
				this.isInit = true; // 标记为true
				this.mescroll.triggerDownScroll();
			}
		},
		methods: {
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				console.log('下拉刷新了', mescroll);
				
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
				mescroll.resetUpScroll()
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
				console.log('上拉加载了', mescroll);
				 
				 // 此时mescroll会携带page的参数:
				 let pageNum = mescroll.num; // 页码, 默认从1开始
				 let pageSize = mescroll.size; // 页长, 默认每页10条
				 
				 // 课程列表
				 this.getNews(pageNum, pageSize, mescroll, this.i)
			},
			async getNews(pageNum, pageSize, mescroll, i){
				let res = await this.$api.news({page: pageNum, page_size: pageSize, category: i})
				if(res.statusCode === 200){
					console.log('课程列表', res.data.data)
					console.log("i="+this.i+", mescroll.num=" + mescroll.num + ", mescroll.size=" + mescroll.size + ", curPageData.length=" + res.data.data.length);
					
					// 接口返回的当前页数据列表 (数组)
					let curPageData = res.data.data
					
					// 接口返回的总条数
					let totalSize = res.data.meta.total
					
					//设置列表数据
					if(mescroll.num == 1) this.newsList = []; //如果是第一页需手动置空列表
					this.newsList = this.newsList.concat(curPageData); //追加新数据
					
					// 成功隐藏下拉加载状态
					//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
					mescroll.endBySize(curPageData.length, totalSize); 
												
					// this.$store.dispatch('sendNews', res.data.data)
				}
			}, 
			// 图片加载失败
			imgError: function (e) {
				let errorImgIndex = e.currentTarget.id
				this.newsList[errorImgIndex].image = '/static/image/errorImg.svg'
			}
		}
	}
</script>

<style class="scss">
	.two-omit{
		  text-overflow: -o-ellipsis-lastline;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  line-clamp: 2;
		  -webkit-box-orient: vertical;
	}
</style>
